<template>
  <div>tabs演示</div>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane name="tab1" label="面板一"></el-tab-pane>
      <el-tab-pane name="tab2" label="面板二"></el-tab-pane>
      <el-tab-pane name="tab3" label="面板三"></el-tab-pane>
    </el-tabs>
    <div>{{ activeName }}</div>
    <!-- 三个等于号：值和格式相对  两个等于号：值相同返回true -->
    <div>{{ 11 === '11' }} {{ 11 == '11' }}</div>
    <!-- 面板一的内容 -->
    <div v-if="activeName === 'tab1'">
      <TabOne></TabOne>
    </div>

    <!-- 面板二的内容 -->
    <div v-if="activeName === 'tab2'">
      <TabTwo></TabTwo>
    </div>

    <!-- 面板三的内容 -->
    <div v-if="activeName === 'tab3'">
      <TabThree></TabThree>
    </div>

    <hr />

    <div class="buttons">
      <span
        @click="activeButton = d.key"
        :class="{ active: activeButton == d.key }"
        v-for="d in buttons"
        :key="d.key"
      >
        {{ d.text }}
      </span>
    </div>

    <hr />
    <button @click="visible = !visible">控制页面显示</button>
    <!-- v-if 是移除元素，v-show 是设置display:none不显示移除 -->
    <!-- 尽量用if -->
    <div v-if="visible">显示效果一</div>
    <div v-show="visible">显示效果二</div>

    <!-- :class={'要动态添加或移除的class名称':是否添加逻辑表达式} -->
    <div class="div01" :class="{ active: visible }">通过变量控制class属性</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElTabs, ElTabPane } from 'element-plus'
import TabOne from './TabOne.vue'
import TabTwo from './TabTwo.vue'
import TabThree from './TabThree.vue'

const activeName = ref('tab1')

const buttons = [
  {
    key: 'btn1',
    text: '按钮一',
  },
  {
    key: 'btn2',
    text: '按钮二',
  },
  {
    key: 'btn3',
    text: '按钮三',
  },
]

const activeButton = ref('btn1')

const visible = ref(true)
</script>

<style scoped lang="scss">
.buttons {
  margin: 1rem;
  > span {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.2rem 0.1rem;
    border: 2px solid #dcdcdc;
    border-radius: 0.2rem;
    transition: all 0.3s;
    &:hover {
      cursor: pointer;
      background-color: #7938da;
      border-color: #7938da;
      color: #fff;
      transition: all 0.3s;
    }
  }
  .active {
    background-color: #7938da;
    border-color: #7938da;
    color: #fff;
    transition: all 0.3s;
  }
}

.div01 {
  color: red;
}
.div01.active {
  border: 1px solid #dcdcdc;
}
</style>
